<template>
        <div class="modal">
            <div class="modal-content">
                <!-- <span class="close-button" @click="closeModal">&times;</span> -->
                <h1>新增数据集版本</h1>
                <h3>新增数据集版本  V2</h3>
                <form @submit.prevent="submitForm"> <!-- 添加.prevent来阻止默认提交事件 -->
                    <div class="form-group">
                        <label for="remarks">备注消息</label>
                        <textarea id="remarks" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="technicalDirection">技术方向</label>
                        <select id="technicalDirection" class="form-control">
                            <option>表格预测</option>
                        </select>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="submit-btn" @click="() => emit('response', 1)">完成</button>
                        <button type="button" class="cancel-btn" @click="() => emit('response', 3)">取消</button> 
                    </div>
                </form>
            </div>
        </div>
</template>
<script setup>
const emit = defineEmits(['respone'])
</script>
<style scoped>
    .modal {
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        width: 500px;
        height: auto;
    }

    .close-button {
        float: right;
        font-size: 1.5rem;
        font-weight: bold;
        cursor: pointer;
    }
    .form-group {
        margin-bottom: 15px;
    }

    .form-control {
        width: 100%;
        padding: 8px;
        font-size: 1rem;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 4px;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .form-control:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .submit-btn {
        display: inline-block;
        font-weight: 400;
        color: #212529;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-color: #007bff;
        border: 1px solid #007bff;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0.25rem;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .submit-btn:hover {
        background-color: #0056b3;
        border-color: #004085;
    }
    form-actions {
        display: flex;
        justify-content: flex-end;
    }

    .cancel-btn {
        margin-left: 10px;
        background-color: #fff;
        border: 1px solid #ced4da;
        color: #212529;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        border-radius: 0.25rem;
        cursor: pointer;
    }

    .cancel-btn:hover {
        background-color: #e2e6ea;
    }
</style>